<template>
   <div class="extensionIncomeDetails">
      <myHead title="收益明细"></myHead>
      <div class="head">
         <div class="head-top">
            <p class="h-t-myShouru">我的总收入</p>
            <p class="h-t-money"><span>￥</span>{{record.general_income}}</p>
            <div class="head-top-bot">
               <p><span>{{record.statistics.share_commission}}</span><span>分享佣金</span></p>
               <p><span>{{record.statistics.publicity_commission}}</span><span>宣传佣金</span></p>
            </div>
            <div class="tuoyuan"></div>
         </div>
         <div class="head-bot">
            <div class="head-bot-item">
               <p>今日获得</p>
               <p>{{record.statistics_log_2}}<span>元</span></p>
            </div>
            <div class="head-bot-item">
               <p>今日获得</p>
               <p>{{record.statistics_log_1}}<span>元</span></p>
            </div>
         </div>
      </div>
      <div class="line"></div>

      <div class="content">
         <div class="header">
            <div class="headerBox" v-for="(x,y) in typeTit" @click="type(y)">
               <p :class="typeIndex == y?'showTyped showType':'showType'">{{x.text}}</p>
               <transition name="el-zoom-in-center">
                  <p v-show="y == typeIndex"></p>
               </transition>
            </div>
         </div>
         <!-- 空订单状态 -->
         <div class="empty" :style="{minHeight:$store.state.minHeight-1.1+'rem'}" v-show="list.length<1">
            <img src="../../../static/img/orderNo.png" alt="">
            <p>暂无收益</p>
         </div>

         <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功" v-show="list.length>=1" :style="{height:$store.state.minHeight-3.78+'rem',overflowX:'hidden'}">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad(typeIndex,false)"
                    finished-text="没有更多了"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
            >
               <van-cell v-for="(item,y) in list" :key="y" >
                  <!-- 详情 -->
                  <div class="detail-item">
                     <p>
                        <span>{{item.type==1?'宣传佣金':'分享佣金'}}</span>
                        <span>{{item.addtime | formatDate}}</span>
                     </p>
                     <p>+{{item.money}}</p>
                  </div>
               </van-cell>
            </van-list>
         </van-pull-refresh>
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"
    import {formatDate} from '../../methods/time'
    export default {
        name: "extensionIncomeDetails",
        filters: {
            formatDate(time) {
                time = time * 1000;
                let date = new Date(time);
                return formatDate(date, 'yyyy/MM/dd')
            }
        },
        components:{
            myHead
        },
        data(){
            return {
                typeTit:[{text:'全部'},{text:'分享佣金'},{text:'宣传佣金'}],
                list:[],
                loading: false,
                finished: false,
                refreshing: false,
                typeIndex:0,
                error: false,
                page:1, // 当前数据页
                record:{
                    statistics:{
                        share_commission:0,
                        publicity_commission:0
                    },
                    general_income:0
                }
            }
        },
        created(){
            this.onLoad(this.typeIndex);
            this.$myAxios('index/user/statistics','post',{
                user_id:this.$myStorage.query('user')
            }).then(res=>{
                var data = res.data;
                this.record = data;
                if (!data.statistics) {
                    this.record.statistics = {
                        sum_commission:0,
                        have_withdrawal:0,
                        publicity_commission:0,
                        share_commission:0
                    };
                    this.record.general_income = 0;
                }
                console.log(this.record.statistics.share_commission)
            });

        },
        methods:{
            onLoad(typeIndex = this.typeIndex,typelook = false) {
                if (this.refreshing) {
                    this.page = 1;
                    this.refreshing = false;
                    this.$myAxios('index/share/statistics_log','post',{
                        user_id:this.$myStorage.query(),
                        type:typeIndex,
                        page:this.page
                    }).then(res=>{
                        if (res.data.state == '1') {
                            if(res.data.statistics_log.data.length < 1){
                                this.finished = true;
                            }else {
                                this.page+=1;
                            }
                            this.list = res.data.statistics_log.data;
                            this.loading = false;
                        } else {
                            this.error = true;
                        }
                    }).catch(res=>{
                        this.error = true;
                    });
                    return;
                }
                this.$myAxios('index/share/statistics_log','post',{
                    user_id:this.$myStorage.query(),
                    type:typeIndex,
                    page:this.page
                }).then(res=>{
                    console.log(res.data);
                    if (res.data.state == '1') {
                        if(res.data.statistics_log.data.length < 1){
                            this.finished = true;
                        }else {
                            this.page+=1;
                        }
                        if (typelook) {
                            this.list = res.data.statistics_log.data;
                        }else {
                            var arr = res.data.statistics_log.data;
                            for (var i = 0; i < arr.length; i++) {
                                this.list.push(arr[i]);
                            }
                        }
                        this.loading = false;
                    } else {
                        this.error = true;
                    }
                }).catch(res=>{
                    this.error = true;
                });
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad(this.typeIndex);
            },
            // 切换type
            type(index){
                if (this.typeIndex == index){return}
                $('.van-pull-refresh').scrollTop(0);
                this.typeIndex = index;
                this.page = 1;
                this.finished = false;
                this.onLoad(this.typeIndex,true);
            },
            jump(page){
                this.$router.push({
                    name:page
                })
            }
        }
    }
</script>

<style scoped>
   .extensionIncomeDetails {
      padding-top: .5rem;
   }
   .head {
      padding: .15rem;
   }
   .head-top {
      width:3.45rem;
      height:1.75rem;
      background:linear-gradient(114deg,rgba(255,142,65,1),rgba(255,110,0,1));
      border-radius:.04rem;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: .25rem 0 .1rem 0;
      position: relative;
   }
   .h-t-myShouru {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FFFFFF;
   }
   .h-t-money {
      color: #FFFFFF;
      font-family:PingFang SC;
      font-weight:bold;
      font-size: .3rem;
   }
   .h-t-money>span {
      font-size: .15rem;
   }
   .head-top-bot {
      width: 100%;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .head-top-bot>p {
      width: 50%;
      display: flex;
      flex-flow: column;
      align-items: center;
      font-family:PingFang SC;
      font-weight:bold;
      color: #FFFFFF;
      font-size: .17rem;
      box-sizing: border-box;
   }
   .head-top-bot>p:nth-child(1) {
      border-right: .01rem solid #FFFFFF;
   }
   .head-top-bot>p>span:nth-child(2) {
      font-size: .12rem;
   }
   .tuoyuan {
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 50%;
      background-color: rgba(241,241,241,.1);
      position: absolute;
      top: -65%;
      left: -30%;
   }
   .head-bot {
      display: flex;
      flex-flow: row;
      align-items: center;
      margin-top: .15rem;
   }
   .head-bot-item {
      width: 50%;
      text-align: center;
   }
   .head-bot-item>p:nth-child(1) {
      font-size:.12rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #999999;
   }
   .head-bot-item>p:nth-child(2) {
      font-size:24px;
      font-family:Adobe Heiti Std;
      font-weight:normal;
      color: #EE3212;
   }
   .head-bot-item>p:nth-child(2)>span {
      color: #333333;
      font-size: .12rem;
   }
   .line {
      width: 100%;
      height: .08rem;
      background-color: #F5F5F5;
   }


   .header {
      background-color: #FFFFFF;
      height: .5rem;
      width: 3.75rem;
      white-space: nowrap;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .header::-webkit-scrollbar {
      display: none;
   }
   .headerBox {
      width: calc(100% / 3);
      height: 100%;
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
   }
   .headerBox>p:nth-child(2) {
      width: 100%;
      position: absolute;
      bottom: .05rem;
      height: .02rem;
      background-color: #FF8C3D;
   }
   .showType {
      height: .4rem;
      line-height: .4rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:bold;
      color: #333333;
   }
   .showTyped {
      color: #FF8C3D;
   }


   .fenG {
      width: 100%;
      height: .1rem;
      background-color: #F5F5F5;
   }
   .empty {
      background-color: #F5F5F5;
      display: flex;
      flex-flow: column;
      align-items: center;
      box-sizing: border-box;
      padding-top: .3rem;
   }
   .empty>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
   }
   .empty>img {
      width: 1.62rem;
      max-height: 1.26rem;
      margin-bottom: .2rem;
   }
   .detail-item {
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: .01rem solid #F5F5F5;
      padding: 0 .2rem;
   }
   .detail-item>p:nth-child(1) {
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #333333;
      line-height: .15rem;
   }
   .detail-item>p:nth-child(2) {
      font-size:.15rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #565656;
   }
   .detail-item>p:nth-child(1)>span:nth-child(2) {
      font-size: .11rem;
      color: #999999;
   }


   /* 懒加载适配 */
   >>> .van-cell {
      padding: 0;
      line-height: 0;
      font-size: 0;
   }
   >>> .van-list__loading {
      font-size: .14rem;
      line-height: .5rem;
   }
   >>> .van-loading__spinner--circular{
      width: .16rem;
      height: .16rem;
   }
   >>> .van-loading__text {
      font-size: .14rem;
      margin-left: .08rem;
   }
   >>> .van-cell:not(:last-child)::after {
      border-bottom: none;
   }
   >>> .van-cell {
      margin-bottom: .1rem;
   }
   >>> .van-pull-refresh {
      overflow: inherit;
   }
   >>> .van-list {
     height: 100%;
   }
</style>
